M

MLOG

Türkçe

React'te hataları etkili bir şekilde yönetmek ve işler ters gittiğinde bile sorunsuz bir kullanıcı deneyimi sağlamak için zarif gerileme stratejilerini nasıl uygulayacağınızı öğrenin. Hata sınırları, yedek bileşenler ve veri doğrulama için çeşitli teknikleri keşfedin.

React Hata Kurtarma: Sağlam Uygulamalar için Zarif Gerileme Stratejileri

Sağlam ve esnek React uygulamaları oluşturmak, hata yönetimine kapsamlı bir yaklaşım gerektirir. Hataları önlemek çok önemli olsa da, kaçınılmaz çalışma zamanı istisnalarını zarif bir şekilde ele almak için stratejilere sahip olmak da aynı derecede önemlidir. Bu blog yazısı, beklenmedik hatalar meydana geldiğinde bile sorunsuz ve bilgilendirici bir kullanıcı deneyimi sağlayarak React'te zarif gerilemenin uygulanması için çeşitli teknikleri araştırmaktadır.

Hata Kurtarma Neden Önemlidir?

Bir kullanıcının uygulamanızla etkileşime girdiğini ve aniden bir bileşenin çökerek şifreli bir hata mesajı veya boş bir ekran gösterdiğini hayal edin. Bu durum hayal kırıklığına, kötü bir kullanıcı deneyimine ve potansiyel olarak kullanıcı kaybına yol açabilir. Etkili hata kurtarma birkaç nedenden dolayı çok önemlidir:

Hata Sınırları (Error Boundaries): Temel Bir Yaklaşım

Hata sınırları, alt bileşen ağacının herhangi bir yerindeki JavaScript hatalarını yakalayan, bu hataları günlüğe kaydeden ve çöken bileşen ağacı yerine bir yedek arayüz gösteren React bileşenleridir. Bunları JavaScript'in `catch {}` bloğu gibi düşünebilirsiniz, ancak React bileşenleri için.

Bir Hata Sınırı Bileşeni Oluşturma

Hata sınırları, `static getDerivedStateFromError()` ve `componentDidCatch()` yaşam döngüsü yöntemlerini uygulayan sınıf bileşenleridir. Temel bir hata sınırı bileşeni oluşturalım:

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null,
    };
  }

  static getDerivedStateFromError(error) {
    // Bir sonraki render'ın yedek arayüzü göstermesi için state'i güncelleyin.
    return {
      hasError: true,
      error: error
    };
  }

  componentDidCatch(error, errorInfo) {
    // Hatayı bir hata raporlama servisine de gönderebilirsiniz
    console.error("Yakalanan hata:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
    // Örnek: hatayiServiseGonder(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // İstediğiniz özel bir yedek arayüzü render edebilirsiniz
      return (
        <div>
          <h2>Bir şeyler ters gitti.</h2>
          <p>{this.state.error && this.state.error.toString()}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorInfo && this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Açıklama:

Hata Sınırını Kullanma

Hata sınırını kullanmak için, korumak istediğiniz bileşen ağacını basitçe sarmalayın:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

Eğer `MyComponent` veya onun alt bileşenlerinden herhangi biri bir hata atarsa, `ErrorBoundary` bunu yakalayacak ve yedek arayüzünü render edecektir.

Hata Sınırları için Önemli Hususlar

Yedek Bileşenler (Fallback Components): Alternatifler Sunma

Yedek bileşenler, birincil bir bileşen yüklenemediğinde veya düzgün çalışmadığında render edilen arayüz elemanlarıdır. Hatalar karşısında bile işlevselliği sürdürmenin ve olumlu bir kullanıcı deneyimi sağlamanın bir yolunu sunarlar.

Yedek Bileşen Türleri

Yedek Bileşenleri Uygulama

Yedek bileşenleri uygulamak için koşullu render etme veya `try...catch` ifadesini kullanabilirsiniz.

Koşullu Render Etme

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP hatası! durum: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      }
    }

    fetchData();
  }, []);

  if (error) {
    return <p>Hata: {error.message}. Lütfen daha sonra tekrar deneyin.</p>; // Yedek Arayüz
  }

  if (!data) {
    return <p>Yükleniyor...</p>;
  }

  return <div>{/* Verileri burada render et */}</div>;
}

export default MyComponent;

try...catch İfadesi

import React, { useState } from 'react';

function MyComponent() {
  const [content, setContent] = useState(null);

  try {
      //Potansiyel Olarak Hataya Açık Kod
      if (content === null){
          throw new Error("İçerik boş");
      }
    return <div>{content}</div>
  } catch (error) {
    return <div>Bir hata oluştu: {error.message}</div> // Yedek Arayüz
  }
}

export default MyComponent;

Yedek Bileşenlerin Faydaları

Veri Doğrulama: Hataları Kaynağında Önleme

Veri doğrulama, uygulamanız tarafından kullanılan verilerin geçerli ve tutarlı olmasını sağlama sürecidir. Verileri doğrulayarak, birçok hatanın ilk etapta oluşmasını önleyebilir, bu da daha kararlı ve güvenilir bir uygulamaya yol açar.

Veri Doğrulama Türleri

Doğrulama Teknikleri

Örnek: Kullanıcı Girdisini Doğrulama

import React, { useState } from 'react';

function MyForm() {
  const [email, setEmail] = useState('');
  const [emailError, setEmailError] = useState('');

  const handleEmailChange = (event) => {
    const newEmail = event.target.value;
    setEmail(newEmail);

    // Basit bir regex kullanarak e-posta doğrulaması
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newEmail)) {
      setEmailError('Geçersiz e-posta adresi');
    } else {
      setEmailError('');
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (emailError) {
      alert('Lütfen formdaki hataları düzeltin.');
      return;
    }
    // Formu gönder
    alert('Form başarıyla gönderildi!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        E-posta:
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      {emailError && <div style={{ color: 'red' }}>{emailError}</div>}
      <button type="submit">Gönder</button>
    </form>
  );
}

export default MyForm;

Veri Doğrulamanın Faydaları

Hata Kurtarma için Gelişmiş Teknikler

Hata sınırları, yedek bileşenler ve veri doğrulama gibi temel stratejilerin ötesinde, birkaç gelişmiş teknik React uygulamalarınızdaki hata kurtarmayı daha da geliştirebilir.

Yeniden Deneme Mekanizmaları

Ağ bağlantısı sorunları gibi geçici hatalar için yeniden deneme mekanizmaları uygulamak kullanıcı deneyimini iyileştirebilir. `axios-retry` gibi kütüphaneleri kullanabilir veya `setTimeout` veya `Promise.retry` (varsa) kullanarak kendi yeniden deneme mantığınızı uygulayabilirsiniz.

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3, // yeniden deneme sayısı
  retryDelay: (retryCount) => {
    console.log(`yeniden deneme: ${retryCount}`);
    return retryCount * 1000; // denemeler arası zaman aralığı
  },
  retryCondition: (error) => {
    // yeniden deneme koşulu belirtilmezse, varsayılan olarak idempotent istekler yeniden denenir
    return error.response.status === 503; // sunucu hatalarını yeniden dene
  },
});

axios
  .get('https://api.example.com/data')
  .then((response) => {
    // başarı durumunu işle
  })
  .catch((error) => {
    // denemelerden sonra hatayı işle
  });

Devre Kesici Deseni (Circuit Breaker Pattern)

Devre kesici deseni, bir uygulamanın başarısız olması muhtemel bir işlemi tekrar tekrar yürütmeye çalışmasını önler. Belirli sayıda hata meydana geldiğinde devreyi "açarak" çalışır ve bir süre geçene kadar daha fazla denemeyi engeller. Bu, zincirleme arızaları önlemeye ve uygulamanın genel kararlılığını artırmaya yardımcı olabilir.

JavaScript'te devre kesici desenini uygulamak için `opossum` gibi kütüphaneler kullanılabilir.

Hız Sınırlama (Rate Limiting)

Hız sınırlama, bir kullanıcının veya istemcinin belirli bir süre içinde yapabileceği istek sayısını sınırlayarak uygulamanızı aşırı yüklenmekten korur. Bu, hizmet reddi (DoS) saldırılarını önlemeye ve uygulamanızın duyarlı kalmasını sağlamaya yardımcı olabilir.

Hız sınırlama, sunucu düzeyinde ara yazılım (middleware) veya kütüphaneler kullanılarak uygulanabilir. Ayrıca, hız sınırlama ve diğer güvenlik özelliklerini sağlamak için Cloudflare veya Akamai gibi üçüncü taraf hizmetleri de kullanabilirsiniz.

Özellik Bayraklarında (Feature Flags) Zarif Gerileme

Özellik bayrakları kullanmak, yeni kod dağıtmadan özellikleri açıp kapatmanıza olanak tanır. Bu, sorun yaşayan özellikleri zarif bir şekilde geriletmek için yararlı olabilir. Örneğin, belirli bir özellik performans sorunlarına neden oluyorsa, sorun çözülene kadar bir özellik bayrağı kullanarak geçici olarak devre dışı bırakabilirsiniz.

LaunchDarkly veya Split gibi birçok hizmet özellik bayrağı yönetimi sağlar.

Gerçek Dünya Örnekleri ve En İyi Uygulamalar

React uygulamalarında zarif gerilemeyi uygulamak için bazı gerçek dünya örneklerini ve en iyi uygulamaları inceleyelim.

E-ticaret Platformu

Sosyal Medya Uygulaması

Küresel Haber Web Sitesi

Hata Kurtarma Stratejilerini Test Etme

Hata kurtarma stratejilerinizin beklendiği gibi çalıştığından emin olmak için test etmeniz çok önemlidir. İşte bazı test teknikleri:

Sonuç

React'te zarif gerileme stratejileri uygulamak, sağlam ve esnek uygulamalar oluşturmak için esastır. Hata sınırları, yedek bileşenler, veri doğrulama ve yeniden deneme mekanizmaları ve devre kesiciler gibi gelişmiş teknikleri kullanarak, işler ters gittiğinde bile sorunsuz ve bilgilendirici bir kullanıcı deneyimi sağlayabilirsiniz. Hata kurtarma stratejilerinizin beklendiği gibi çalıştığından emin olmak için kapsamlı bir şekilde test etmeyi unutmayın. Hata yönetimine öncelik vererek, daha güvenilir, kullanıcı dostu ve nihayetinde daha başarılı React uygulamaları oluşturabilirsiniz.